class initData {
  //卡片轮播图对象
  switchPic = null
  modles = {
    '0': 'win',
    '1': 'quest',
    '2': 'winquest',
    '3': 'none'
  }
  // 类型枚举
   typeList = {
    '0' : '',
    '1': '冒险',
    '2': '儿童',
    '3': '射击',
    '4': '运动',
     '5': '',
     '6': ''
  }
  // 导航列表
  navList = [
    {
      type: 1,
      title: '冒险'
    },
    {
      type: 2,
      title: '儿童'
    },
    {
      type: 3,
      title: '射击'
    },
    {
      type: 4,
      title: '运动'
    }
  ]
  //当前选中的电脑
  currentComputer = null

  constructor() {
//游戏分类导航
    this.cateSwitch()
//  点击全选
    this.selectAllPc()
//  单击机器
//   clickPc()
//请求数据，初始化卡片列表
    this.getGameList()
//  获取VR头盔列表数据
    this.getVrList()
//  启动机器
    this.startPc()
  }

  //点击启动按钮
  startPc() {
    let _self = this
    $('#start-btn').click(function () {
      //如果按钮处于禁用状态
      if ($(this).hasClass('not-allowed')) {
        return
      }
      let posterItem = $('#zturn').children('.active')
      let gameObj = posterItem.data('gameObj')
      //判断机器列表中是否有
      let pc = Array.from($('.pc-list').children()).find(item => $(item).data('gameId') == gameObj.id)
      if (pc) {
        //机器对象
        let pcObj = $(pc).data('pcObj')
        //机器是否被激活
        let state = pcObj['Active']
        pcObj['Active'] = !state
        $(pc).data('pcObj', pcObj)[state ? 'removeClass' : 'addClass']('active')
        $(this).text(state ? '关闭' : '启动')
        $(pc).find('.state').text(state ? '繁忙' : '空闲')
      } else {
        //如果用户选择了某个机器（头盔）
        if (_self.currentComputer) {
          $(_self.currentComputer).data('gameId', gameObj.id)
        } else {
          let vr = null
          $('.pc-list').children().each(function (i, n) {
            //  如果机器列表中modle和状态为空闲的，则
            if ($(n).data('pcObj')['modle'] == gameObj['Modle'] && !$(n).data('pcObj')['Active']) {
              vr = $(n)
            }
          })
          // 如果没有匹配空闲的机器，则
          if (vr == null) {
            return alert('启动失败！适配该游戏的头盔繁忙')
          }
        }
        $(this).text('关闭')
      }
    });
  }

  //点击全选机器
  selectAllPc(status) {
    let _self = this
    let isSelectAll = status
    let selectAll = './img/全选.png'
    let selectSome = './img/未全选.png'
    $('#check-pc').attr('src', isSelectAll ? selectAll : selectSome)
    $('#check-pc').click(function () {
      isSelectAll = !isSelectAll
      //切换选中状态图片
      $(this).attr('src', isSelectAll ? selectAll : selectSome)
      //机器列表选中装态切换
      let operate = isSelectAll ? 'addClass' : "removeClass"
      $('.pc-list').children()[operate]('active')
      $('.start-btn')[operate]('not-allowed')
    })
  }

  //获取头盔列表
  getVrList() {
    let _self = this
    $.getJSON("./api/ComputerActive.json", function (data) {
      console.log(data, '头盔列表')
      data.forEach(item => {
        let pcItem = $('.pc-list').prepend(`<div class="pc-item">
        <p class="computer"></p>
        <p class="computer-desc">${item.No}号|${item.Name}|${item.Mac}|
        <span class="state">${(item['Active'] ? "忙碌" : "空闲")}</span>
        </p>
      </div>`).children().first()
        pcItem.data('pcObj', item)
        pcItem.addClass(item.modle == 0 ? 'pc' : 'vr')
        pcItem.addClass(item['Active'] ? '' : 'active')
      })
    })
    //点击相应机器，切换对应的modle
    $(".pc-list").on("click", ".pc-item .computer", function (event) {
      let current = $(this).parent()
      _self.currentComputer = current
      current.addClass('active')
      //如果机器处于繁忙状态，则找出对应的游戏
      if (current.data('pcObj')['Active']){
        $("#zturn").children().each(function (i, n) {
          if ($(n).data('gameObj')['id'] == current.data('gameId')) {
            $(n).show()
          } else {
            $(n).hide()
          }
        })
      }else {
        $("#zturn").children().each(function (i, n) {
          if ($(n).data('gameObj')['Modle'] == current.data('pcObj')['modle']) {
            $(n).show()
          } else {
            $(n).hide()
          }
        })
      }
      //是否全部为激活状态
      let isAllActive = $('.pc-list').children().not('.active').length
      _self.selectAllPc(!isAllActive)
      //重新初始化游戏卡片
      _self.initCard()
    });
  }

  //导航分类切换
  cateSwitch() {
    let _self = this
    // 获取导航元素
    let navItem = $('.nav-item')
    // 将导航元素添加到列表中
    _self.navList.forEach((item) => {
      let node = navItem.clone(true)
      node.text(item.title)
      node.data('type', item.type)
      $('.nav-list').append(node)
    })
    //给第一个导航元素添加热门
    navItem.data('IsHot', true)
    // 默认给第一个导航元素添加状态
    $(".nav-list .nav-item:first-child").addClass('active')
    //点击分类导航，切换对应游戏分类海报
    $(".nav-list").on("click", ".nav-item", function (event) {
      $(".nav-list .nav-item").each(function (index, item) {
        $(item).removeClass('active')
      });
      let current = $(this)
      current.addClass('active')
      $("#zturn .poster-item").each(function (i, n) {
        if (current.data('IsHot')) {
          if ($(n).data('gameObj').IsHot == current.data('IsHot')) {
            $(n).show()
          } else {
            $(n).hide()
          }
        } else {
          if ($(n).data('gameObj').Type == current.data('type')) {
            $(n).show()
          } else {
            $(n).hide()
          }
        }
      })
      //重新初始化游戏卡片
      _self.initCard()
    });
  }

  //获取游戏列表
  getGameList() {
    let _self = this
    $.getJSON("./api/initialize.json", function (data) {
      console.log(data)
      let posterList = $('#zturn')
      let posterItem = $('.poster-item')
      // 遍历生成游戏海报
      $.each(data, function (i, n) {
        let item = posterItem.clone(true)
        item.find('.xxgy').text(n.gameName)
        item.find('.for_btn img').attr('src', n.image)
        item.find('.say').text(_self.typeList[n.Type] + ' | ' + _self.modles[n.Modle])
        item.data("gameObj", n)
        posterList.append(item)
      })
      posterItem.remove()
// 初始化卡片
      _self.initCard()
    });
  }

  initCard() {
    this.switchPic = new zturn({
      id: "zturn",
      opacity: 0.9,
      width: 382,
      Awidth: 1024,
      scale: 0.9
    })
  }

}

//页面加载完后，进行相应操作
window.onload = function () {
//  初始化数据
  new initData()
}


//点击全选


// // 单选机器
// function clickPc() {
//   $('.pc-list').on('click', '.pc-item .computer', function () {
//     let _this = $(this).parent()
//     $('#zturn').children().each(function (i, n) {
//       if ($(n).attr('data_n') == _this.data('posterIndex')) {
//         $(n).click()
//       }
//     })
//     //是否全部为激活状态
//     let isAllActive = $('.pc-list').children().not('.active').length
//     selectAllPc(!isAllActive)
//   })
// }

